/* 
    Document   : main
    Created on : Sep 2, 2011, 11:40:49 AM
    Author     : Mikey
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/*
BUGS:

1. max zoom out, the menu bar is outside the div.
Can't set auto height on div, because then child div disappears.

2. What's wrong with the bg picture?

*/

root {
       
}

body {
    width: 50em;
    margin-left: auto;
    margin-right: auto;
}

/* TOPLEFT -- contains menu
*/
#topleft {
    background-color: darkseagreen;
    margin-top: 20px;
    margin-bottom: 20px;
 /*   padding: 0px; This is not necessary */
    border: solid 1px #000000;
    border-color: black;
    width: 100%;

    height: 4em;
}

/* TOPRIGHT -- contains smiley face
*/

#topright {
    border-left: solid 1px #000000;
    border-color: black;
    width: 100px;
    float: right;
    background-color: moccasin;
    background-size: 300px;
    background-image: url('http://upload.wikimedia.org/wikipedia/commons/7/79/Face-smile.svg');
    background-position: center;
    height: inherit;
}

#topleft ul {
    margin-left: 0;
    padding-left: 1.5em;
}

#topleft li {
    display: inline-block;
    margin-left: 0px;
    padding-right: 2.2em;
    font-size: 1.5em;
    font-variant: small-caps;
}

#topleft li:hover {
    color: white;
}

#bottom {
    border: dashed 1px black;
    width: 50em;
    height: 20em;
    background-color: moccasin;
 }
 
 #content {
     margin: 20px;
     color: brown;
     font-size: 1em;
     font-style: italic;
     font-family: "Times New Roman";
 }
 
 #flash_button {
     text-align: center;
 }
 
 ul.dropdown {
    margin-left: 0;
    padding-left: 2em;
 }
 
 ul.dropdown li {
     font-weight: bold;
     list-style-type: none;
 }

 ul.dropdown li:hover {
     color: white;
 } 
 #fruits_dropdown, #vegetables_dropdown, #nuts_dropdown {
     position: absolute;
     background-color: moccasin;
     width: 15em;
     height: 5em;
     border: double 3px black;
     visibility: hidden;
 }